<template>
  <div class="audition111">
    <p><strong>块格式化上下文（Block Formatting Context，BFC）</strong></p>
    <p>是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，<br>
      也是浮动元素与其他元素交互的区域。</p>
    <h3><strong>BFC布局规则：</strong></h3>
    <p>1. 区域内的盒子会在垂直方向上一个接一个的放置</p>
    <p>2. 相邻的盒子的距离由margin绝对，会发生边距重叠。</p>
    <p>3. BFC区域不会被浮动盒子覆盖</p>
    <p>4. 计算BFC区域的高度时，里面的浮动元素也会参与计算</p>
    <h3><strong>创建BFC的方式：</strong></h3>
    <p>1. 根元素(&lt;html&gt;)</p>
    <p>2. 浮动元素：float的值不是none</p>
    <p>3. 绝对定位元素：position的值是absolute或fixed</p>
    <p>4. 行内块元素：display为inline-block</p>
    <p>5. 表格的各种元素，如table , table-cell , table-caption等</p>
    <p>6. overflow不是visible</p>
    <p>7. 弹性元素：（display 为 flex 或 inline-flex 元素的直接子元素）</p>
    <p>8. 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）</p>
    <p>9. 多列容器, column-count和column-width不是auto</p>
  </div>
</template>

<script>
export default {
  name: 'Audition111'
}
</script>

<style>

</style>